<template>
  <div class="container">
    <div class="box">
        <div class="login">
            <div class="top">
                <h1 style="text-align:left;font-weight: normal;"><i class="el-icon-connection" style="color:#00acac;font-size:1.5em;"></i>注册<span style=" "></span> <br> </h1>
          <div class="suo">
              <i class="el-icon-lock"></i>
          </div>
            </div>
        
        
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item prop="name">
    <el-input v-model="ruleForm.name" placeholder="用户名"></el-input>
  </el-form-item>     
   <el-form-item prop="pwd">
    <el-input v-model="ruleForm.pwd" placeholder="密码"></el-input>
  </el-form-item>
    <el-form-item prop="emails">
    <el-input type="email" v-model="ruleForm.emails" placeholder="邮箱"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input type="button" @click.native="submitForm('ruleForm')" value="注册" id="login_btn"/>
  </el-form-item>  
</el-form>
  <p><span class="denglu" @click="denglu()">返回登录页面</span>  &emsp;&emsp;&emsp; <span class="wangji">忘记密码</span></p>
        </div>

    </div>
  </div>   
</template>

<script>
export default {
  data() {
    return {
        ruleForm: {
          name: '',
          pwd:'',
          emails:'',
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' } ,
            { min: 2, max: 1000, message: '长度2位以上', trigger: 'blur' }
          ],
           pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 20, message: '长度在 5 到 20 位', trigger: 'blur' }
          ],
         emails: [
            { required: true, message: '邮箱为空', trigger: 'blur' },
            { min:16, max:17, message: '请输入正确的邮箱', trigger: 'blur' }
          ],
        }
      
    }    
  },
  methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             var objstr =this.$qs.stringify({
                name:this.ruleForm.name,
                pwd:this.ruleForm.pwd,
                emails:this.ruleForm.emails,
            })
              this.$apiPost('http://47.94.4.201/index.php/index/index/register',objstr).then((res)=>{
                    if(res.code==0){
                         this.$message.success('注册成功')
                        clearTimeout(this.timer);  //清除延迟执行 
                        this.timer=setTimeout(()=>{  //设置延迟执行
                           this.$router.push({ path:'/login'})
                        },1000);
                    }else if(res.code==3){
                        this.$message.error('用户名重复')
                    }else if(res.code==2){
                         this.$message.error('用户，密码或邮箱不能为空')
                    }else if(res.code==1){
                        this.$message.error('注册失败')
                    console.log(res)
                    }
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     denglu(){
        clearTimeout(this.timer);  //清除延迟执行 
        this.timer=setTimeout(()=>{  //设置延迟执行
            this.$router.push({path:'/login'})
        },1000);   
     }

  },
  components: {

  }
}
</script>

<style scoped>
.container{
    width: 100vw;
    height: 100vh;
    background: url('../assets/img/login_tu.jpg') no-repeat;
    z-index: -10;
}
.container .box{
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.5);
  z-index: -5;
  color:#fff;
 
  display: flex;
  display: -webkit-flex;

}
.login{
  /* border: 1px solid red; */
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
}
.top{
  position: relative;
}
.top .spa_zhu{
  font-weight: normal;
  font-size: 0.5em;
  color: #7f9295;
}
.top .suo{
  position: absolute;
  top:-10px;
  right:0;
  color: #7f9295;
  font-size: 5em;
 
}
.el-input{
  margin-top:10px;
  width:35vw;
  /* display: block; */
}
/deep/ .el-input #login_btn{
  background:#00acac;
  font-weight: normal;
  font-size:1.5em;
}
/deep/ .el-input .el-input__inner{
 background: rgba(0,0,0,.5);
  border: 1px solid transparent;
  color: #fff;
  height: 50px;
}
/deep/ .el-form-item{
  margin-left: -100px;
}
.denglu{
  cursor:pointer;
}
.wangji{
  cursor:pointer;
}
</style>
